<template>
    <view style="border: solid 1px white">
        <view class="logon-page" v-show="!this.loginMethodBoolean">
            <uni-forms ref="phoneLoginForm" :rules="phoneLoginRules" :modelValue="phoneLoginFormData">
                <uni-forms-item name="userPhone">
                    <uni-easyinput v-model="phoneLoginFormData.userPhone" type="phone" placeholder="手机号"
                                   placeholderStyle="color: #DDD" :maxlength=11 />
                </uni-forms-item>
                <uni-forms-item name="authCode">
                    <uni-easyinput v-model="phoneLoginFormData.authCode" type="number" placeholder="验证码"
                                   placeholderStyle="color: #DDD" :maxlength=6 />
                </uni-forms-item>
            </uni-forms>
            <button type="primary"
                    @click="login('phoneLoginForm')"
                    style="border-radius: 25px; background-color: #1989FA;"
                    v-if="this.showLoginBtn
                            && this.phoneNumberRegularExpression.test(this.phoneLoginFormData.userPhone)
                            && this.phoneLoginFormData.authCode !== null && this.phoneLoginFormData.authCode.length > 0">
                登录
            </button>
            <button type="primary"
                    @click="getAuthCode('phoneLoginForm')"
                    :disabled="this.authCodeBtnDisable" style="border-radius: 25px; background-color: #1989FA;" v-else>
                {{ this.authCodeBtnText }}
            </button>
        </view>

        <view class="logon-page" v-show="this.loginMethodBoolean">
            <uni-forms ref="userNamePasswordLoginForm" :rules="userNamePasswordLoginRules"
                       :modelValue="userNamePasswordLoginFormData">
                <uni-forms-item name="userName">
                    <uni-easyinput v-model="userNamePasswordLoginFormData.userName" type="number"
                                   placeholder="账号/手机号" placeholderStyle="color: #DDD" :maxlength=11 />
                </uni-forms-item>
                <uni-forms-item name="userPassword">
                    <uni-easyinput v-model="userNamePasswordLoginFormData.userPassword" type="password"
                                   placeholder="密码" placeholderStyle="color: #DDD" />
                </uni-forms-item>
            </uni-forms>
            <button type="primary" @click="login('userNamePasswordLoginForm')"
                    style="border-radius: 25px; background-color: #1989FA;">登录
            </button>
        </view>

        <view class="login-type" @click="changeLoginMethod">{{ this.loginMethod }}</view>
        <view class="register" @click="register">注册</view>
    </view>
</template>

<script>
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import UniForms from "../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";

import {loading, toast, hide} from "../../js/utils/showTip";
import {login, getAuthCode} from "../../js/api/user";

export default {
    name: "login",
    components: {UniFormsItem, UniForms, UniEasyinput},
    data() {
        return {
            phoneNumberRegularExpression: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
            phoneLoginFormData: {
                userPhone: '',
                authCode: ''
            },
            userNamePasswordLoginFormData: {
                userName: '13363150950',
                userPassword: '123456'
            },
            authCodeBtnText: '获取验证码',
            authCodeBtnDisable: false,
            loginMethod: "手机号登陆",
            loginMethodBoolean: true,
            showLoginBtn: false,
            phoneLoginRules: {
                userPhone: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入手机号'
                        },
                        {
                            validateFunction: function (rule, value, data, callback) {
                                var phoneRegex = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
                                if (!phoneRegex.test(value)) {
                                    callback('请输入正确的手机号')
                                }
                                return true
                            }
                        }
                    ]
                }
            },
            userNamePasswordLoginRules: {
                userName: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入账号'
                        }
                    ]
                },
                userPassword: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入密码'
                        }
                    ]
                }
            }
        }
    },
    methods: {
        login(ref) {
            this.$refs[ref].validate().then(res => {
                loading("登陆中...", true)
                login(res, this.loginMethodBoolean).then(response => {
                    if (response.code === 200) {
                        console.log(response.data)
                        uni.setStorageSync('user', response.data);
                        toast(response.message, "success", false, 500);
                        uni.redirectTo({
                            url: '/pages/index/index'
                        })
                        hide()
                    } else {
                        toast(response.message, "error", false, 1000)
                        this.showLoginBtn = false
                    }
                })
            }).catch(err => {
                this.userNamePasswordLoginFormData.userPassword = '';
                this.phoneLoginFormData.authCode = '';
                hide()
            })
        },
        changeLoginMethod() {
            this.loginMethod = this.loginMethodBoolean ? '账号密码登录' : "手机号登陆";
            this.loginMethodBoolean = !this.loginMethodBoolean;
            this.phoneLoginFormData = {
                userPhone: '',
                authCode: ''
            };
            this.userNamePasswordLoginFormData = {
                userName: '',
                userPassword: ''
            };
            this.$refs.userNamePasswordLoginForm.setRules(this.userNamePasswordLoginRules)
            this.$refs.phoneLoginForm.setRules(this.phoneLoginRules)
        },
        getAuthCode(ref) {
            this.$refs[ref].validate().then(res => {
                this.authCodeBtnDisable = true
                let timeNumber = 60
                var interval = setInterval(() => {
                    let times = --timeNumber
                    timeNumber = times < 10 ? '0' + times : times //小于10秒补 0
                    this.authCodeBtnText = timeNumber + "" + "秒后再次获取"
                }, 1000)
                setTimeout(() => {
                    clearInterval(interval)
                    this.authCodeBtnText = '获取验证码';
                    this.authCodeBtnDisable = false;
                }, 60000)
                getAuthCode(res.userPhone).then(response => {
                    if (response.code === 200) {
                        toast("已发送", "SUCCESS", true, 1500)
                        this.showLoginBtn = true
                    } else {
                        toast(response.message, "ERROR", true, 1500)
                    }
                })
            })
            // getAuthCode(res)
        },
        register() {
            uni.navigateTo({
                url: '/pages/register/register'
            })
        }
    },
    onReady() {
        // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    }
}
</script>

<style scoped>
.logon-page {
    padding: 15px;
    background-color: #fff;
    margin-top: 40%;
}

.login-type, .register {
    color: #3c9cff;
    text-align: center;
    font-size: 15px;
}

.register {
    position: fixed;
    top: 95%; /*相对于视口顶部*/
    width: 100%; /*宽度为视口宽度*/
    height: 100%; /*高度为视口高度*/
    z-index: 9999; /*设置叠放次序*/
}
</style>